<template>
  <div class="box">
    <header>
      <van-nav-bar title="地址">
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="$router.back()"
          />
        </template>
        <template #right>
          <van-icon
            name="success"
            size="26"
            color="black"
            @click="$router.back()"
          />
        </template>
      </van-nav-bar>
    </header>
      <div class="amain"> 
        <van-index-bar v-for="(item, index) in cityList" :key="index" :index-list="indexList">
        <van-index-anchor index="a">{{item.letter}}</van-index-anchor>
        <van-cell  v-for="(item, index) in item.data" :key="index"  :title="item.name" />
      </van-index-bar>
      </div> 
    </div>
 
</template>

<script>
import $axios from "axios";
import Vue from "vue";
import { IndexBar, IndexAnchor } from "vant";

Vue.use(IndexBar);
Vue.use(IndexAnchor);
export default {
  data() {
    return {
      cityList: [],
      indexList: [],
    };
  },
  methods: {
    onselect(index){
      console.log(index);
    }
  },
  created() {
    $axios.get("/city/sortCity.json").then((res) => {
      this.cityList = res.data;
      console.log(this.cityList);
      this.cityList.forEach((item) => {
        this.indexList.push(item.letter);
      });
      console.log( this.indexList);
    });
  },
};
</script>

<style scoped>
.box{
  display: flex;
  flex-direction: column;

}
.amain{
  flex: 1;
  overflow-y: auto;
}

</style>